<template>
  <div class="app-container jc_layout_craft">
    <div class="jc_bottom_top">
      <h6 class="jc_craft_title">工艺路径</h6>
      <el-button-group class="jc_btn_wrap jc_btn_left">
        <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>新建</el-button>
        <el-button @click="editRow"><i class=""></i>编辑</el-button>
        <el-button @click="deleteRow"><i class=""></i>删除</el-button>
      </el-button-group>
      <el-table @cell-click="pathRowsClick" :height="tableHeight_top" :data="PathList" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="80px">
        </el-table-column>
        <el-table-column label='编号'>
          <template scope="scope">
            {{scope.row.pathNo}}
          </template>
        </el-table-column>
        <el-table-column label='名称'>
          <template scope="scope">
            {{scope.row.pathName}}
          </template>
        </el-table-column>
        <el-table-column label='备注'>
          <template scope="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column label='状态'>
          <template scope="scope">
            {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column label='创建人'>
          <template scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column label='创建时间'>
          <template scope="scope">
            {{scope.row.createTime}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="changePage"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!--新建-->
      <el-dialog title="新建工艺路径" :visible.sync="create_visible" class="jc_dialog_wrap">
        <el-form :model="create" label-width="120px">
          <el-form-item label="编号">
            <el-input v-model="create.pathNo"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="create.pathName"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="create.remark"></el-input>
          </el-form-item>
        </el-form>
        <el-table ref="createTable" @cell-click="rowsClick" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80px">
          </el-table-column>
          <el-table-column label='名称'>
            <template scope="scope">
              <img src="../../assets/dw_icon/arrow_right.png" v-if="scope.row.status===true" class="jc_arrow">
              <img src="../../assets/dw_icon/arrow_down.png" v-else-if="scope.row.status === false" class="jc_arrow">
              <span v-else ="scope.row.status === 'isChildren'" style="color:transparent;">11</span>
              {{scope.row.processName}}
            </template>
          </el-table-column>
          <el-table-column label='编号'>
            <template scope="scope">
              {{scope.row.processsNo}}
            </template>
          </el-table-column>
          <el-table-column label='优先级'>
            <template scope="scope">
              {{scope.row.priority}}
            </template>
          </el-table-column>
          <el-table-column label='备注'>
            <template scope="scope">
              {{scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column label='创建人'>
            <template scope="scope">
              {{scope.row.userName}}
            </template>
          </el-table-column>
          <el-table-column label='创建时间'>
            <template scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCreateForm">确定</el-button>
          <el-button @click="create_visible=false">取消</el-button>
        </div>
      </el-dialog>
      <!--编辑-->
      <el-dialog title="编辑工艺路径" :visible.sync="edit_visible" class="jc_dialog_wrap">
        <el-form :model="edit" label-width="120px">
          <el-form-item label="编号">
            <el-input v-model="edit.pathNo"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="edit.pathName"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="edit.remark"></el-input>
          </el-form-item>
        </el-form>
        <el-table ref="createTable" :data="list_edit" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
          <!--<el-table-column type="selection" width="80px">
          </el-table-column>-->
          <el-table-column>
            <template scope="scope">
              <input type="checkbox" v-model="scope.row.selected"/>
            </template>
          </el-table-column>
          <el-table-column label='名称'>
            <template scope="scope">
              <img src="../../assets/dw_icon/arrow_right.png" v-if="scope.row.status===true" class="jc_arrow">
              <img src="../../assets/dw_icon/arrow_down.png" v-else-if="scope.row.status === false" class="jc_arrow">
              <span v-else ="scope.row.status === 'isChildren'" style="color:transparent;">11</span>
              {{scope.row.processName}}
            </template>
          </el-table-column>
          <el-table-column label='编号'>
            <template scope="scope">
              {{scope.row.processsNo}}
            </template>
          </el-table-column>
          <el-table-column label='优先级'>
            <template scope="scope">
              {{scope.row.priority}}
            </template>
          </el-table-column>
          <el-table-column label='备注'>
            <template scope="scope">
              {{scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column label='创建人'>
            <template scope="scope">
              {{scope.row.userName}}
            </template>
          </el-table-column>
          <el-table-column label='创建时间'>
            <template scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitEditForm">确定</el-button>
          <el-button @click="edit_visible=false">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="jc_bottom_left">
      <h6 class="jc_craft_title">工序信息</h6>
      <el-table  @cell-click="rowsClick_gongxu" :height="tableHeight_bottom" :data="list_gongxu" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @current-change="handleSelectionChangee">
        <!-- <el-table-column type="selection" width="80px"> -->
        <el-table-column type="index" width="80">  </el-table-column>
        </el-table-column>
        <el-table-column label='名称'>
          <template scope="scope">
            <img src="../../assets/dw_icon/arrow_right.png" v-if="scope.row.status===true" class="jc_arrow">
            <img src="../../assets/dw_icon/arrow_down.png" v-else-if="scope.row.status === false" class="jc_arrow">
            <span v-else ="scope.row.status === 'isChildren'" style="color:transparent;">11</span>
            {{scope.row.processName}}
          </template>
        </el-table-column>
        <el-table-column label='编号'>
          <template scope="scope">
            {{scope.row.processsNo}}
        </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="jc_bottom_right">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="工艺参数" name="first">

          <el-button-group class="jc_btn_wrap jc_btn_left">
              <el-button @click="createRowp"><i class="jc_icon el-icon-plus"></i>新建</el-button>
              <el-button @click="editRowp"><i class=""></i>编辑</el-button>
              <el-button @click="deleteRowp"><i class=""></i>删除</el-button>
          </el-button-group>

          <el-table :height="tableHeight_bottom-60" :data="plist" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChangep">
                    <el-table-column type="selection" width="80px"></el-table-column>
                    <el-table-column label='工艺名称'>
                      <template scope="scope"> {{scope.row.paramName}}  </template>
                    </el-table-column>
                    <el-table-column label='工艺参数'>
                      <template scope="scope"> {{scope.row.param}}  </template>
                    </el-table-column>
                    <el-table-column label='备注'>
                      <template scope="scope"> {{scope.row.remark}}  </template>
                    </el-table-column>
                    <el-table-column label='创建人'>
                      <template scope="scope"> {{scope.row.userName}}  </template>
                    </el-table-column>
                    <el-table-column label='创建时间'>
                      <template scope="scope"> {{scope.row.createTime}}  </template>
                    </el-table-column>

            </el-table>
            <el-pagination
              @size-change="handleSizeChangep"   
              @current-change="changePagep"
              :current-page="currentPagep"
              :page-size="pageSizep"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalp">
            </el-pagination>

            <!--新建-->
          <el-dialog title="新建工艺参数" :visible.sync="create_visible_p" class="jc_dialog_wrap">
            <el-form :model="form_create_p" label-width="120px">
          <el-form-item label="工艺名称">
            <el-input v-model="form_create_p.paramName"></el-input>
          </el-form-item>
          <el-form-item label="工艺参数">
            <el-input v-model="form_create_p.param"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form_create_p.remark"></el-input>
          </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCreateFormp">确定</el-button>
          <el-button @click="create_visible_p=false">取消</el-button>
            </div>
          </el-dialog>
          <!--编辑-->
      <el-dialog title="编辑工艺参数" :visible.sync="edit_visible_p" class="jc_dialog_wrap">
        <el-form :model="form_edit_p" label-width="120px">
          <el-form-item label="工艺名称">
            <el-input v-model="form_edit_p.paramName"></el-input>
          </el-form-item>
          <el-form-item label="工艺参数">
            <el-input v-model="form_edit_p.param"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form_edit_p.remark"></el-input>
          </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditFormp">确定</el-button>
        <el-button @click="edit_visible_p=false">取消</el-button>
      </div>
      </el-dialog>


          </el-tab-pane>
          <el-tab-pane label="检验标准" name="second">


            <el-button-group class="jc_btn_wrap jc_btn_left">
              <el-button @click="createRowq"><i class="jc_icon el-icon-plus"></i>新建</el-button>
              <el-button @click="editRowq"><i class=""></i>编辑</el-button>
              <el-button @click="deleteRowq"><i class=""></i>删除</el-button>
            </el-button-group>
            <el-table :height="tableHeight_bottom-60" :data="qlist" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChangeq">
              <el-table-column type="selection" width="80px"></el-table-column>
              <el-table-column label='检验项目编号'>
                    <template scope="scope">{{scope.row.checkNo}}</template>
              </el-table-column>
              <el-table-column label='检验项目'>
                    <template scope="scope">{{scope.row.checkItem}}</template>
              </el-table-column>
              <el-table-column label='检验内容'>
                    <template scope="scope">{{scope.row.checkContent}}</template>
              </el-table-column>
              <el-table-column label='检验说明'>
                    <template scope="scope">{{scope.row.checkDescription}}</template>
              </el-table-column>
              <el-table-column label='上限'>
                    <template scope="scope">{{scope.row.maxValue}}</template>
              </el-table-column>
              <el-table-column label='下限'>
                    <template scope="scope">{{scope.row.minValue}}</template>
              </el-table-column>
              <el-table-column label='备注'>
                    <template scope="scope">{{scope.row.remark}}</template>
              </el-table-column>
              <el-table-column label='创建人'>
                    <template scope="scope">{{scope.row.userName}}</template>
              </el-table-column>
              <el-table-column label='创建时间'>
                    <template scope="scope">{{scope.row.createTime}}</template>
              </el-table-column>

            </el-table>
            <el-pagination
              @size-change="handleSizeChangeq"
              @current-change="changePageq"
              :current-page="currentPageq"
              :page-size="pageSizeq"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalq">
            </el-pagination>

            <!--新建-->
          <el-dialog title="新建工艺参数" :visible.sync="create_visible_q" class="jc_dialog_wrap">
            <el-form :model="form_create_q" label-width="120px">
          <el-form-item label="检验项目编号">
            <el-input v-model="form_create_q.checkNo"></el-input>
          </el-form-item>
          <el-form-item label="检验项目">
            <el-input v-model="form_create_q.checkItem"></el-input>
          </el-form-item>
          <el-form-item label="检验内容">
            <el-input v-model="form_create_q.checkContent"></el-input>
          </el-form-item>
          <el-form-item label="检验说明">
            <el-input v-model="form_create_q.checkDescription"></el-input>
          </el-form-item>
          <el-form-item label="检验上限">
            <el-input v-model="form_create_q.maxValue"></el-input>
          </el-form-item>
          <el-form-item label="检验下限">
            <el-input v-model="form_create_q.minValue"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form_create_q.remark"></el-input>
          </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCreateFormq">确定</el-button>
          <el-button @click="create_visible_q=false">取消</el-button>
            </div>
          </el-dialog>
          <!--编辑-->
      <el-dialog title="编辑工艺参数" :visible.sync="edit_visible_q" class="jc_dialog_wrap">
        <el-form :model="form_edit_q" label-width="120px">
          <el-form-item label="检验项目编号">
            <el-input v-model="form_edit_q.checkNo"></el-input>
          </el-form-item>
          <el-form-item label="检验项目">
            <el-input v-model="form_edit_q.checkItem"></el-input>
          </el-form-item>
          <el-form-item label="检验内容">
            <el-input v-model="form_edit_q.checkContent"></el-input>
          </el-form-item>
          <el-form-item label="检验说明">
            <el-input v-model="form_edit_q.checkDescription"></el-input>
          </el-form-item>
          <el-form-item label="检验上限">
            <el-input v-model="form_edit_q.maxValue"></el-input>
          </el-form-item>
          <el-form-item label="检验下限">
            <el-input v-model="form_edit_q.minValue"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form_edit_q.remark"></el-input>
          </el-form-item> 
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditFormq">确定</el-button>
        <el-button @click="edit_visible_q=false">取消</el-button>
      </div>
      </el-dialog>


          </el-tab-pane>
          <el-tab-pane label="BOM清单" name="third">


              <el-button-group class="jc_btn_wrap jc_btn_left">
              <el-button @click="createRoww"><i class="jc_icon el-icon-plus"></i>新建</el-button>
              <el-button @click="editRoww"><i class=""></i>编辑</el-button>
              <el-button @click="deleteRoww"><i class=""></i>删除</el-button>
            </el-button-group>
            <el-table :height="tableHeight_bottom-60" :data="wlist" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChangew">
              <el-table-column type="selection" width="80px"></el-table-column>
              <el-table-column label="BOM名称">
                 <template scope="scope">{{scope.row.bomName}}</template>
              </el-table-column>

              <el-table-column  label="BOM编号">
                 <template scope="scope">{{scope.row.bomNo}}</template>
              </el-table-column>
              <el-table-column  label="BOM版本">
                <template scope="scope">{{scope.row.bomVersion}}</template>
              </el-table-column>

              <el-table-column  label="配料单号">
                <template scope="scope">{{scope.row.batchingNo}}</template>
              </el-table-column>
              <el-table-column  label="配料单名称">
                <template scope="scope">{{scope.row.batchingName}}</template>
              </el-table-column>
              <el-table-column  label="备注">
                <template scope="scope">{{scope.row.remark}}</template>
              </el-table-column>
              <el-table-column  label="创建人">
                <template scope="scope">{{scope.row.userName}}</template>
              </el-table-column>
              <el-table-column  label="创建时间">
                <template scope="scope">{{scope.row.createTime}}</template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChangew"
              @current-change="changePagew"
              :current-page="currentPagew"
              :page-size="pageSizew"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalw">
            </el-pagination>

            <!--新建-->
            <el-dialog title="新建BOM清单" :visible.sync="create_visible_w" class="jc_dialog_wrap lkh"
            >
                <el-form :model="form_create_w" label-width="120px">
                    <div class="clearfloat">
                        <el-form-item label="工艺BOM">

                            <el-select v-model="rrr" filterable placeholder="请选择" @change="ppp">
                                <el-option  :disabled="true" :value="null" style=""
                                class="lkh_option">
                                   <span>BOM名称</span>
                                   <span>BOM编号</span>
                                   <span>BOM版本</span>
                                   <span>备注</span>
                                </el-option> 
                                <el-option  v-for="item in bom"  
                                :key="item.id" 
                                :label="item.bomName" 
                                :value="item.id"
                                class="lkh_option">
                                <span>{{item.bomName}}</span>
                                <span>{{item.bomNo}}</span>
                                <span>{{item.bomVersion}}</span>
                                <span>{{item.remark}}</span>
                                </el-option>
                            </el-select>


                        </el-form-item>
                        <el-form-item label="配料单号">
                            <el-input v-model="form_create_w.batchingNo"></el-input>
                        </el-form-item>
                        <el-form-item label="配料单名称">
                            <el-input v-model="form_create_w.batchingName"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form_create_w.remark"></el-input>
                        </el-form-item>
                    </div>
                
                    <div class="lkh_table">
                        <div class="lkh_table_title">工艺batching物料</div>
                        <div class="lkh_table_titles">
                             <div>物料种类</div>
                             <div>物料名称</div>
                             <div>物料编码</div>
                             <div>供应商</div>
                             <div>型号规格</div>
                             <div>等级</div>
                             <div>物料数量</div>  
                             <div>物料单位</div>
                             <div>备注</div>
                             <div>操作 <i class="el-icon-plus plus" @click="handleAddinputw"></i></div>
                        </div>
                        <div class="lkh_table_con" v-for='(item,index) of inputList_w' :key="index">
                            <div>
                                <el-select v-model="item.materielTypeId"  placeholder="请选择" style="width:80px;" class="lkh_select">
                                    <el-option  v-for="items in options"  :key="items.value" :label="items.typeName" :value="items.id" style="width:80px">
                                    </el-option>
                                </el-select>
                            </div>
                            <div><input type="text" class="lkh_input" v-model="item.materielName"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNo"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielSupplier"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNorms"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielLevel"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNumber"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielUnit"></div>
                            <div><input type="text" class="lkh_input" v-model="item.remark"></div>
                            <div @click="handleDeleteinput(index)"><i class="el-icon-minus minus"></i></div>
                        </div>

                    </div>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitCreateFormw">确定</el-button>
                    <el-button @click="create_visible_w=false">取消</el-button>
                </div>
            </el-dialog>

              <!--编辑-->

            <el-dialog title="编辑BOM清单" :visible.sync="edit_visible_w" class="jc_dialog_wrap lkh"
            >
                <el-form :model="form_edit_w" label-width="120px">
                    <div class="clearfloat">
                        <el-form-item label="工艺BOM">
                            <el-select v-model="ttt" filterable placeholder="请选择" @change="qqq">
                                <el-option  :disabled="true" :value="null" style=""
                                class="lkh_option">
                                   <span>BOM名称</span>
                                   <span>BOM编号</span>
                                   <span>BOM版本</span>
                                   <span>备注</span>
                                </el-option> 
                                <el-option  v-for="item in bom"  
                                :key="item.id" 
                                :label="item.bomName" 
                                :value="item.id"
                                class="lkh_option">
                                <span>{{item.bomName}}</span>
                                <span>{{item.bomNo}}</span>
                                <span>{{item.bomVersion}}</span>
                                <span>{{item.remark}}</span>
                                </el-option>
                            </el-select>


                        </el-form-item>
                        <el-form-item label="配料单号">
                            <el-input v-model="form_edit_w.batchingNo"></el-input>
                        </el-form-item>
                        <el-form-item label="配料单名称">
                            <el-input v-model="form_edit_w.batchingName"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form_edit_w.remark"></el-input>
                        </el-form-item>
                    </div>
                
                    <div class="lkh_table">
                        <div class="lkh_table_title">工艺batching物料</div>
                        <div class="lkh_table_titles">
                             <div>物料种类</div>
                             <div>物料名称</div>
                             <div>物料编码</div>
                             <div>供应商</div>
                             <div>型号规格</div>
                             <div>等级</div>
                             <div>物料数量</div>
                             <div>物料单位</div>
                             <div>备注</div>
                             <div>操作 <i class="el-icon-plus plus" @click="handleAddChangeinput"></i></div>
                        </div>
                        <div class="lkh_table_con" v-for='(item,index) of changeList_w' :key="index">
                            <div>
                                <el-select v-model="item.materielTypeId"  placeholder="请选择" style="width:80px;" class="lkh_select">
                                    <el-option  v-for="items in options"  :key="items.value" :label="items.typeName" :value="items.id" style="width:80px">
                                    </el-option>
                                </el-select>
                            </div>
                            <div><input type="text" class="lkh_input" v-model="item.materielName"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNo"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielSupplier"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNorms"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielLevel"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielNumber"></div>
                            <div><input type="text" class="lkh_input" v-model="item.materielUnit"></div>
                            <div><input type="text" class="lkh_input" v-model="item.remark"></div>
                            <div @click="handleDeleteChangeinput(index)"><i class="el-icon-minus minus"></i></div>
                        </div>

                    </div>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitEditFormw">确定</el-button>
                    <el-button @click="edit_visible_w=false">取消</el-button>
                </div>
            </el-dialog>

          </el-tab-pane>
        </el-tabs>
      </template>

    </div>

  </div>
</template>

<script>

  import * as Path from "../../api/process/path";
  import * as Procedure from "../../api/process/procedure"; //树形--工序工步
  import * as Pramscontroller from "../../api/process/pramscontroller"; 
  import * as TestStandard from "../../api/process/testStandard"; 
  import * as Bomlist from "../../api/process/bomlist"

  import * as Technics from "../../api/process/technicsbom";
  import * as MaterialType from "../../api/process/materialTypes";


  export default {
    components: {},
    data() {
      return {
        PathList: null,
        list: null, //树形结构
        /*更改处*/
        list_gongxu: null,//工序中的树形结构
        list_edit: null,//工序中的树形结构
        chenckIds: [],
        /*更改处*/
        total: 0,
        pageSize: 10,
        currentPage: 1,
        create_visible: false,
        edit_visible: false,
        create: {},
        form_create: {},
        form_edit: {},
        edit: {},
        multipleSelection: [],
        activeName: 'first',

        currentRow:null,   

        plist:null,
        multipleSelectionp:[],
        currentPagep:1,
        pageSizep:10,
        totalp:0,
        create_visible_p:false,
        form_create_p:{},
        edit_visible_p:false,
        form_edit_p:{},
        
        pathId:0,  

        qlist:null,
        multipleSelectionq:[],
        currentPageq:1,
        pageSizeq:10,
        totalq:0,
        create_visible_q:false,
        form_create_q:{},
        edit_visible_q:false,
        form_edit_q:{},

        wlist:null,
        multipleSelectionw:[],
        currentPagew:1,
        pageSizew:10,
        totalw:0,
        create_visible_w:false,
        form_create_w:{},
        edit_visible_w:false,
        form_edit_w:{},
        bom:[],
        inputList_w:[],
        changeList_w:[],
        options:[],
        rrr:'',
        ttt:'',
        Obj:{
            materielTypeId:'',
            materielName:'',
            materielNo:'',
            materielSupplier:'',
            materielNorms:'',
            materielLevel:'',
            materielNumber:'',
            materielUnit:'',
            remark:''
        }

      }

    },
    mounted() {
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData(p=1) {
        this.listLoading = true;
        var searchList = {}
        searchList.pageNum = this.currentPage = p;
        searchList.pageSize = this.pageSize;
        Path.getList(searchList).then(data => {
          this.PathList = data.rows;
          this.total = data.total;
          this.listLoading = false;
        })
      },
      createRow() {
        this.create = {},
        this.create_visible = true;
        this.form_create = {};
        Procedure.getTreeList().then(data => {
          this.getTreeData(data); //显示树形菜单
        })
      },
      rowsClick(row) { //点击树形菜单 出现或者隐藏子集
        if(row.status === true && row.isChildren != true) {//让子集不添加箭头
          for(var i in this.list) {
            if(row.id === this.list[i].id) {
              this.list[i].status = false; //点击时把向右箭头改成向下箭头
              var newValue = this.list[i];
              this.list.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
              var addPosition = Number(i) + 1 //子集要插入的位置
            }
          }
          for(var i in row.children) {
            this.list.splice(Number(i)+Number(addPosition),0 ,row.children[i]); //添加数据
          }
        }else if(row.status === false && row.isChildren != true){
          for(var i=this.list.length-1;i>= 0;i--) {
            if(row.id === this.list[i].id) {
              this.list[i].status = true; //点击时把向右箭头改成向下箭头
              var newValue = this.list[i];
              this.list.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
            }
            for(var j in row.children) {
              if(this.list[i].id ===row.children[j].id) {
                this.list.splice(Number(i), 1);
              }
            }
          }
        }
      },
      submitCreateForm() {
        this.form_create = {};
        var ids = [];
        for(var i in this.multipleSelection) { //子元素 一定要一并发送父元素
          ids.push(this.multipleSelection[i].id)
           if(this.multipleSelection[i].parentId !== 0) {
             ids.push(this.multipleSelection[i].parentId)
           }
        }
        ids = ids.sort(); //排序
        for(var i=ids.length-1;i>=0;i--) {//删除重复项
            if(ids[i]== ids[i-1]) {
                ids.splice(i,1);
            }
        }
        for(var j in ids) { //后端要的数据格式
          this.form_create["processPathProcedureDtos["+j+"].processId"] = ids[j];
        }

        this.form_create.pathName = this.create.pathName;
        this.form_create.pathNo = this.create.pathNo;
        this.form_create.remark = this.create.remark;
        console.log('this.form_create',this.form_create);
        Path.createRow(this.form_create).then(data => {
          this.create_visible = false;
          this.fetchData();
        })
      },
      pathRowsClick(row) { //点击工艺路径的某行,出现对应的工序信息
        Path.gongXuList(row.id).then(data => {
          this.getTreeData_gongxu(data);
        })
      },
      editRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次最多勾选一行');
        }else if(this.multipleSelection.length === 1){
          Path.gongXuList(this.multipleSelection[0].id).then(data => {
            this.chenckIds = [];
            var ids = []; //获得勾选项
            for(var i=0;i<=data.length-1;i++){
               ids.push(data[i].processId);
               if(data[i].children!== '[]'){
                   for(var j in data[i].children) {
                     ids.push(data[i].children[j].processId)
                     this.chenckIds.push(data[i].children[j].processId)
                   }
               }
            }
            this.edit_visible = true;
            this.edit.id =this.multipleSelection[0].id;
            this.edit.pathName =this.multipleSelection[0].pathName;
            this.edit.pathNo =this.multipleSelection[0].pathNo;
            this.edit.remark =this.multipleSelection[0].remark;
            Procedure.getTreeList().then(data => {
              this.list_edit = [];
              this.list_edit =data;//展开的树形菜单
              var children = [];
              for(var i=0;i<this.list_edit.length;i++) { //所有的父集都加上向右的箭头
                if(this.list_edit[i].parentId === 0) {
                  this.list_edit[i].status = true;
                }
                for(var j in this.list_edit[i].children) {
                  this.list_edit[i].children[j].isChildren = true;
                  children.push(this.list_edit[i].children[j]);
                }
              }
              for(var i=this.list_edit.length-1;i>=0;i--) { //添加子集
                  for(var j in children) {
                      if(this.list_edit[i].id ===children[j].parentId) {
                          this.list_edit.splice(i+1, 0, children[j]);
                      }
                  }
              }
              var checkData = ids;//统一做勾选
              var rows = this.list_edit;
              for (var j = 0; j < rows.length; j++) {
                if (checkData.indexOf(rows[j].id) >= 0) {
                 this.list_edit[j]['selected'] = true
                }
              }
            })
          })
        }
      },
      submitEditForm() {
          //如果只有子元素 一定要一并发送父元素；要排序，删除相同的项
          var editIds = [];
          for(var i in this.list_edit) {
              if(this.list_edit[i].selected) {
                editIds.push(this.list_edit[i].id);
                if(this.list_edit[i].parentId !== 0) {
                  editIds.push(this.list_edit[i].parentId);
                }
              }
          }
          editIds = editIds.sort();
          console.log('editIds',editIds);
          for(var i=editIds.length-1;i>=0;i--) {
              console.log('i',i);
              if(editIds[i] === editIds[i-1]) {
                editIds.splice(i,1);
              }
          }
        console.log('editIds',editIds);
          //要提交的数据
        for(var j in editIds) { //后端要的数据格式
          this.edit["processPathProcedureDtos["+j+"].processId"] = editIds[j];
        }


        console.log('this.edit',this.edit);
        Path.editRow(this.edit).then(data => {
          this.edit_visible = false;
          this.fetchData(this.currentPage);
        })
      },
      detailRow(row) {},
      deleteRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次最多勾选一行');
        }else if(this.multipleSelection.length === 1){
          this.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Path.deleteRow(this.multipleSelection[0].id).then(data => {
             this.fetchData(this.currentPage);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
             })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
      handleClick(tab, event) {
        console.log('lkh',tab.index)
        if(this.pathId){
            if(tab.index == 0){
            this.loadp(this.pathId);
            }else if(tab.index ==1){
              this.loadq(this.pathId);
            }else if(tab.index == 2){
              this.loadw(this.pathId);
            }  
        }
      },
      /*更改处*/
      getTreeData(data) {
        this.list =data;
        for(var i=0;i<this.list.length;i++) { //所有的父集都加上向右的箭头
          if(this.list[i].parentId === 0) {
            this.list[i].status = true;
          }
          for(var j in this.list[i].children) {
            this.list[i].children[j].isChildren = true;
          }
        }
      },
      getTreeData_gongxu(data) {
        this.list_gongxu = [];
        this.list_gongxu =data;
        for(var i=0;i<this.list_gongxu.length;i++) { //所有的父集都加上向右的箭头
          if(this.list_gongxu[i].processParentId === 0) {
            this.list_gongxu[i].status = true;
          }
          for(var j in this.list_gongxu[i].children) {
            this.list_gongxu[i].children[j].isChildren = true;
          }
        }
      },
      rowsClick_gongxu(row) {
        if(row.status === true && row.isChildren != true) {//让子集不添加箭头
          for(var i in this.list_gongxu) {
            if(row.id === this.list_gongxu[i].id) {
              this.list_gongxu[i].status = false; //点击时把向右箭头改成向下箭头
              var newValue = this.list_gongxu[i];
              this.list_gongxu.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
              var addPosition = Number(i) + 1 //子集要插入的位置
            }
          }
          for(var i in row.children) {
            this.list_gongxu.splice(Number(i)+Number(addPosition),0 ,row.children[i]); //添加数据
          }
        }else if(row.status === false && row.isChildren != true){
          for(var i=this.list_gongxu.length-1;i>= 0;i--) {
            if(row.id === this.list_gongxu[i].id) {
              this.list_gongxu[i].status = true; //点击时把向右箭头改成向下箭头
              var newValue = this.list_gongxu[i];
              this.list_gongxu.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
            }
            for(var j in row.children) {
              if(this.list_gongxu[i].id ===row.children[j].id) {
                this.list_gongxu.splice(Number(i), 1);
              }
            }
          }
        }
      },
      handleSelectionChangee(val){
          this.currentRow = val;
          console.log('aaaaaaa',this.currentRow)
        if(this.currentRow){
          this.pathId = this.currentRow.id   
          Pramscontroller.getList({pathProcessId:this.currentRow.id}).then((data)=>{
              this.plist = data.rows;
              this.totalp = data.total;
           })
          TestStandard.getList({pathProcessId:this.currentRow.id}).then((data)=>{
               this.qlist = data.rows;
               this.totalq = data.total
          })
          Bomlist.queryByPathProcessId({pathProcessId:this.currentRow.id}).then((data)=>{
              this.wlist = data;
           })  

        }else{
          this.pathId = 0
        }
      },
      createRowp(){
          if(this.pathId){
                    this.create_visible_p = true
                    this.form_create_p = {};  
            }else{
              this.$message({
                  type:'warning',
                  message:'请选择工序信息'
                }) 
            }
      },
      editRowp(){
             if(this.multipleSelectionp.length === 0) {
                this.$message({
                  type:'warning',
                  message:'请先勾选行'
                }) 
              }else if(this.multipleSelectionp.length >= 2) {
                 this.$message({
                  type:'warning',
                  message:'每次最多勾选一行'
                }) 
              }else if(this.multipleSelectionp.length === 1) {
                console.log(this.multipleSelectionp[0])
                this.edit_visible_p = true;
                this.form_edit_p.paramName = this.multipleSelectionp[0].paramName
                this.form_edit_p.param = this.multipleSelectionp[0].param
                this.form_edit_p.remark = this.multipleSelectionp[0].remark
                this.form_edit_p.Id = this.multipleSelectionp[0].id
              }

      }, 
      deleteRowp(){
        if(this.multipleSelectionp.length === 0) {
          this.$message({
            type:'warning',
            message:'请先勾选行'
          }) 
        }else if(this.multipleSelectionp.length >= 2) {
           this.$message({
            type:'warning',
            message:'每次最多勾选一行'
          }) 
        }else if(this.multipleSelectionp.length === 1){
          this.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Pramscontroller.deleteRow(this.multipleSelectionp[0].id).then(data => {
              this.loadp(this.pathId)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }  
      },
      handleSelectionChangep(val){
         this.multipleSelectionp = val;
      },
      handleSizeChangep(){

      },
      changePagep(){

      },
      submitCreateFormp(){
        this.form_create_p.pathProcessId = this.pathId

        Pramscontroller.createRow(this.form_create_p).then(data => {
          this.create_visible_p = false;
          this.loadp(this.pathId)
        }).catch(() =>{
            this.$message.error('创建失败');
        })
      },
      submitEditFormp(){
        
        Pramscontroller.updateRow(this.form_edit_p).then(data => {
          this.edit_visible_p = false;
          this.loadp(this.pathId)
        }).catch(() =>{
            this.$message.error('更新失败');
        })

      },
      loadp(id){
        //刷新页面
        Pramscontroller.getList({pathProcessId:id}).then((data)=>{
              if(data.rows ==null){data.rows = []}
              this.plist = data.rows;
              this.totalp = data.total;
           })

      },


      createRowq(){
         if(this.pathId){
                    this.create_visible_q = true
                    this.form_create_q = {};  
            }else{
              this.$message({
                  type:'warning',
                  message:'请选择工序信息'
                }) 
            }
      },
      editRowq(){
            if(this.multipleSelectionq.length === 0) {
                this.$message({
                  type:'warning',
                  message:'请先勾选行'
                }) 
              }else if(this.multipleSelectionq.length >= 2) {
                 this.$message({
                  type:'warning',
                  message:'每次最多勾选一行'
                }) 
              }else if(this.multipleSelectionq.length === 1) {
                console.log(this.multipleSelectionq[0])
                this.edit_visible_q = true;
                this.form_edit_q.checkNo = this.multipleSelectionq[0].checkNo
                this.form_edit_q.checkItem = this.multipleSelectionq[0].checkItem
                this.form_edit_q.checkContent = this.multipleSelectionq[0].checkContent
                this.form_edit_q.checkDescription = this.multipleSelectionq[0].checkDescription
                this.form_edit_q.maxValue = this.multipleSelectionq[0].maxValue
                this.form_edit_q.minValue = this.multipleSelectionq[0].minValue
                this.form_edit_q.remark = this.multipleSelectionq[0].remark 
                this.form_edit_q.id = this.multipleSelectionq[0].id
              }
      }, 
      deleteRowq(){
           if(this.multipleSelectionq.length === 0) {
          this.$message({
            type:'warning',
            message:'请先勾选行'
          }) 
        }else if(this.multipleSelectionq.length >= 2) {
           this.$message({
            type:'warning',
            message:'每次最多勾选一行'
          }) 
        }else if(this.multipleSelectionq.length === 1){
          this.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            TestStandard.deleteRow(this.multipleSelectionq[0].id).then(data => {
              this.loadq(this.pathId)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }  
      },
      handleSelectionChangeq(val){
         this.multipleSelectionq = val;
      },
      handleSizeChangeq(){

      },
      changePageq(){

      },
      submitCreateFormq(){
         this.form_create_q.pathProcessId = this.pathId

        TestStandard.createRow(this.form_create_q).then(data => {
          this.create_visible_q = false;
          this.loadq(this.pathId)
        }).catch(() =>{
            this.$message.error('创建失败');
        })

      },
      submitEditFormq(){
          TestStandard.updateRow(this.form_edit_q).then(data => {
          this.edit_visible_q = false;
          this.loadq(this.pathId)
        }).catch(() =>{
            this.$message.error('更新失败');
        })
      },
      loadq(id){
        //刷新页面
        TestStandard.getList({pathProcessId:id}).then((data)=>{
              if(data.rows ==null){data.rows = []}
              this.qlist = data.rows;
              this.totalq = data.total;
           })

      },


      createRoww(){
            if(this.pathId){
                    this.create_visible_w = true;
                    this.form_create_w = {};
                    this.rrr = '';
                    this.loadmaterialList()
                    this.loadbomlist()
                    this.inputList_w=[];  
            }else{
              this.$message({
                  type:'warning',
                  message:'请选择工序信息'
                }) 
            }
      },
      loadmaterialList(){
           MaterialType.getList({}).then(data => {
                this.options = data.rows;
            })
      },
      loadbomlist(){
           Technics.query().then(data =>{
               this.bom = data.rows; 
            })
      },
      editRoww(){
            this.loadbomlist() 
            if(this.multipleSelectionw.length === 0) {
                this.$message({
                  type:'warning',
                  message:'请先勾选行'
                }) 
              }else if(this.multipleSelectionw.length >= 2) {
                 this.$message({
                  type:'warning',
                  message:'每次最多勾选一行'
                }) 
              }else if(this.multipleSelectionw.length === 1) {
                console.log(this.multipleSelectionw[0])
                this.edit_visible_w = true;
              Bomlist.batMateriels({id:this.multipleSelectionw[0].id}).then((data)=>{
                 this.changeList_w = data.rows;
                 this.loadmaterialList();
              })
              this.form_edit_w ={}
              this.form_edit_w.id = this.multipleSelectionw[0].id;
              this.ttt = this.multipleSelectionw[0].bomId;
              this.form_edit_w.bomName = this.multipleSelectionw[0].bomName;
              this.form_edit_w.batchingNo = this.multipleSelectionw[0].batchingNo;
              this.form_edit_w.batchingName = this.multipleSelectionw[0].batchingName;
              this.form_edit_w.remark = this.multipleSelectionw[0].remark;  
              }


      }, 
      deleteRoww(){
             if(this.multipleSelectionw.length === 0) {
                  this.$message({
                    type:'warning',
                    message:'请先勾选行'
                  }) 
                }else if(this.multipleSelectionw.length >= 2) {
                   this.$message({
                    type:'warning',
                    message:'每次最多勾选一行'
                  }) 
                }else if(this.multipleSelectionw.length === 1){
                  this.$confirm('是否删除该条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    Bomlist.deleteRows(this.multipleSelectionw[0].id).then(data => {
                      // this.fetchData(this.currentPage);
                      this.loadw(this.pathId);
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      });
                    })

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });

                }
      },
      handleSelectionChangew(val){
         this.multipleSelectionw = val;
      },
      handleSizeChangew(){

      },
      changePagew(){

      },
      submitCreateFormw(){
            for(let i=0;i<this.inputList_w.length;i++){
               this.form_create_w['batchingMaterielDtos['+ i +'].materielTypeId'] = this.inputList_w[i].materielTypeId;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielName'] = this.inputList_w[i].materielName;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielNo'] = this.inputList_w[i].materielNo;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielSupplier'] = this.inputList_w[i].materielSupplier;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielNorms'] = this.inputList_w[i].materielNorms;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielLevel'] = this.inputList_w[i].materielLevel;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielNumber'] = this.inputList_w[i].materielNumber;
               this.form_create_w['batchingMaterielDtos['+ i +'].materielUnit'] = this.inputList_w[i].materielUnit;
               this.form_create_w['batchingMaterielDtos['+ i +'].remark'] = this.inputList_w[i].remark;
            }

            this.form_create_w.bomId = this.rrr;  
            this.form_create_w.pathProcessId = this.pathId
          Bomlist.createRow(this.form_create_w).then( data => {
               this.create_visible_w = false;
               this.loadw(this.pathId);
          }).catch(() =>{
              this.$message.error('创建失败');
          })

      },
      submitEditFormw(){
            this.form_edit_w.bomId = this.ttt
            for(let i=0; i<this.changeList_w.length;i++){
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielTypeId']   = this.changeList_w[i].materielTypeId;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielName']     = this.changeList_w[i].materielName;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielNo']       = this.changeList_w[i].materielNo;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielSupplier'] = this.changeList_w[i].materielSupplier;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielNorms']    = this.changeList_w[i].materielNorms;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielLevel']    = this.changeList_w[i].materielLevel;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielNumber']   = this.changeList_w[i].materielNumber;
                this.form_edit_w['batchingMaterielDtos['+ i +'].materielUnit']     = this.changeList_w[i].materielUnit;
                this.form_edit_w['batchingMaterielDtos['+ i +'].remark']           = this.changeList_w[i].remark; 
            }
            // console.log('mj',this.form_edit_w)
            Bomlist.editRow(this.form_edit_w).then( data => {
               this.edit_visible_w = false;
               this.loadw(this.pathId)
            }).catch((a)=>{
                this.$message.error('更新失败');
            })
      },
      handleAddinputw(){
          this.loadmaterialList();
          var copy = Object.assign({}, this.Obj);
          this.inputList_w.push(copy)
      },
      handleAddChangeinput(){
          this.loadmaterialList();
          var copy = Object.assign({}, this.Obj);
          this.changeList_w.push(copy)
      },
      ppp(){
        if(this.rrr !== ''){
          Technics.materielsList({id:Number(this.rrr)}).then((data)=>{
             this.inputList_w = data.rows
         })
        }  
      },
      qqq(){
         Technics.materielsList({id:Number(this.ttt)}).then((data)=>{
             this.changeList_w = data.rows
         })
      },
      handleDeleteinput(index){
          this.inputList_w.splice(index,1)
      },
      handleDeleteChangeinput (index) {
          this.changeList_w.splice(index,1)
      },
      loadw(id){
          Bomlist.queryByPathProcessId({pathProcessId:id}).then((data)=>{
              if(data.rows ==null){data.rows = []}
              this.wlist = data
           })
      }
    },
    computed: {
      tableHeight_top() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)/2;
        return tableHeight-1;
      },
      tableHeight_bottom() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)/2;
        return tableHeight+25;
      }
    }
  }
</script>
<style>
  .app-container.jc_layout_craft {
    padding: 0;
  }
  .jc_bottom_top {
    border-bottom: 1px solid #72b6db;
  }
  h6.jc_craft_title {
    font-size: 15px;
    font-style: normal;
    margin: 0;
    padding: 5px;
    background: #72b6db;
    color: #000;
  }
  .jc_layout_craft .jc_btn_wrap {
    margin: 2px 0;
  }
  .jc_layout_craft .jc_btn_wrap .el-button {
    margin: 0;
  }
  .jc_bottom_left, .jc_bottom_right {
    float: left;
  }
  .jc_bottom_left {
    width: 30%;
  }
  .jc_bottom_right {
    width: 70%;
  }
  .jc_layout_craft .el-tabs__item {
    height: 27px;
    line-height: 27px;
  }
  .jc_layout_craft .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border: 1px solid #1296db;
    border-bottom-color: #fff;
  }
  .jc_layout_craft .el-tabs__header {
    border-bottom: 1px solid #1296db;
    margin: 0;
  }
  .jc_layout_craft .el-button {
    padding: 4px 20px;
  }
  .jc_layout_craft .el-table .cell, .jc_layout_craft .el-table th > div {
    cursor: pointer;
  }


  .jc_search_wrap label.lkh_label{
  width: 100px;
}
.clearfloat{
    overflow: hidden;
}
.lkh_table{
    width:1000px;
    margin-left: -10px;
    margin-right:-10px;
    font-size:14px;
    font-weight: bold;
    margin-top: 5px;
}
.lkh_table_title{
    height: 40px;
    line-height: 40px;
    background: #1296db;
    padding-left: 20px;
    box-sizing: border-box;
    color:#fff;
}
.lkh_table_titles,
.lkh_table_con{
    height: 40px;
    line-height: 40px;
 /*   box-sizing: border-box;
    padding: 0 20px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;    

}
.lkh_table_titles{
    background: #eee;
    border:1px solid #bbb;
    color:#606266;
}
.lkh_table_con{
    border-bottom: 1px solid #bbb;
}
.lkh_table_titles>div,
.lkh_table_con>div{
   border-right:1px solid #bbb;
   width: 10%;
   text-align: center;
}
.lkh_table_titles>div:last-child,
.lkh_table_con>div:last-child{
   border:none;
}

.el-icon-plus.plus{
    background: #67C23A;
    border-radius: 50%;
    color:#fff;
    padding: 4px;
    cursor: pointer;
}   
.lkh_input{
    width: 70px;
    height: 30px;
    outline: none;
    border:1px solid #aaa;
    border-radius: 4px;

}
.el-icon-minus.minus{
    background: #F56C6C;
    padding: 4px;
    border-radius: 50%;
    color:#fff;
}
.lkh_option{
  width:400px;
  display:flex;
}
.lkh_option span{
  display: block;
  flex:1;
  text-align: center;
}
</style>
